<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JD5</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="../fa/css/all.css">
    <style type="text/css">
        body{
            font-size: 14px;
        }

        .top-bar-wrapper {
            width: 100%;
            height: 30px;
            background-color: #e3e4e5;
            border-bottom: 1px #dddddd solid;
            line-height: 30px;
        }

        .top-bar {
            width: 1190px;
            margin: 0 auto;
        }

        .top-bar a,
        .top-bar span,
        .top-bar i{
            color: #999999;
            text-decoration: none;
        }

        .top-bar a:hover{
            color: #f10215;
        }

        .location{
            float: left;
        }

        .location .city-list{
            width: 320px;
            height: 436px;
            background-color: indianred;
            border: 1px solid silver;
            display: none;
            position: absolute;
            box-shadow: 0 0 10px rgba(0,0,0,.3);
        }

        .location:hover .city-list{
            display: block;
        }

        .location .fa{
            color: #f10215;
        }

        .shortcut{
            float: right;
        }

        .shortcut .line{
            width: 1px;
            height: 10px;
            background-color: #999;
            margin: 10px 12px;
        }

        .shortcut li{
            float: left;
        }
    </style>
</head>
<body>
<div class="top-bar-wrapper">
    <div class="top-bar">
        <div class="location">
            <div class="current-city">
                <i class="fa fa-map-marker"></i>
                <a href="javascript:;">
                    北京
                </a>
            </div>

            <div class="city-list">

            </div>
        </div>

        <ul class="shortcut">
            <li>
                <a href="javascript:;">你好，请登录</a>
                <a href="javascript:;" style="color: #f10215;">免费注册</a>
            </li>

            <li class="line"></li>
            <li><a href="javascript:;">我的订单</a></li>

            <li class="line"></li>
            <li>
                <a href="javascript:;">我的京东</a>
                <i class="fa fa-angle-down"></i>
            </li>


            <li class="line"></li>
            <li>
                <a href="javascript:;">京东会员</a>
                <i class="fa fa-angle-down"></i>
            </li>

            <li class="line"></li>
            <li>
                <a href="javascript:;" style="color: #f10215;">企业采购</a>
                <i class="fa fa-angle-down"></i>
            </li>

            <li class="line"></li>
            <li>
                <span>客户服务</span>
                <i class="fa fa-angle-down"></i>
            </li>

            <li class="line"></li>
            <li>
                <span>网站导航</span>
                <i class="fa fa-angle-down"></i>
            </li>

            <li class="line"></li>
            <li>
                <span>手机京东</span>
            </li>

        </ul>
    </div>
</div>
</body>
</html>